<template>
	<view class="mzw-page-navbg" :style="{paddingTop:topSafeArea+'px',height: `calc(44px+${height})`}"></view>
</template>

<script>
	import getTopSafeArea from "@/static/safeTop.js";
	export default {
		name:"mzw-page-navbg",
		props:{
			height:{
				type: String,
				default: '100rpx'
			}
		},
		data() {
			return {
				topSafeArea: 0
			};
		},
		created() {
			this.topSafeArea = getTopSafeArea();
		}
	}
</script>

<style lang="scss" scoped>
.mzw-page-navbg{
	content: '';
	display: block;
	width: 100%;
	height: calc(44px + 100rpx);
	background-color: #fff;
	background-image: linear-gradient(180deg, rgba(111, 205, 240, 0.4) 0%, rgba(255,255,255,0.4) 100%);
	box-sizing: content-box;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	box-shadow: 0 0 20rpx 0 rgba(167, 188, 195, 0.4);
	&::before{
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background-image: radial-gradient(97.4% 97.4% at 87.07% -16.25%, rgba(193, 255, 58, 0.6) 0%, rgba(58, 255, 199, 0) 100%);
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0.4;
	}
}
</style>